import { Button, message, Pagination, Rate, Select, Space, Table } from "antd";
import type { TableProps } from "antd";
import { useContext, useEffect } from "react";
import { FileExcelFilled } from "@ant-design/icons";
import { Addlist, Dellist, Editlist, getList } from "../../api/Apifox";
import { useState } from "react";
import { Modal } from "antd";
import { Form, Input } from "antd";
import type { PopconfirmProps } from "antd";
import { Popconfirm } from "antd";
import useAuth from "../../hooks/useAuth";
import { useTranslation } from "react-i18next";
import { ThemeContext } from '../Layout/index'; // 确保导入路径正确
import * as XLSX from "xlsx";
import "./index.css";

function index() {
  // 使用自定义的 useAuth 钩子获取认证信息
  let user = useAuth();
  // 获取主题状态
  const { isLightTheme } = useContext(ThemeContext);
  // 定义一个状态变量 List 用于存储列表数据，并初始化为空数组
  const [List, setList] = useState([]);

  // 定义一个状态变量 pageSize 用于存储每页显示的数据条数，初始值未定义
  const [pageSize, setPageSize] = useState();

  // 定义一个状态变量 pageCode 用于存储当前页码，初始值未定义
  const [pageCode, setPageCode] = useState();

  // 定义一个状态变量 total 用于存储数据的总条数，初始值未定义
  const [total, setTotal] = useState();

  // 定义一个状态变量 searchValue 用于存储搜索框的值，初始值为空字符串
  const [searchValue, setSearchValue] = useState("");

  // 定义一个状态变量 type 用于存储某种类型的选择，初始值为空字符串
  const [type, setType] = useState("");

  // 使用 Form.useForm() 创建表单实例 searform，用于搜索功能
  const [searform] = Form.useForm();

  // 定义一个状态变量 modaltitle 用于存储弹窗的标题
  const [modaltitle, setModaltitle] = useState("");

  // 使用 Form.useForm() 创建表单实例 formmsg，用于弹窗表单
  const [formmsg] = Form.useForm();

  // 使用 useTranslation 钩子获取翻译函数 t，用于国际化
  const { t } = useTranslation();

  const { rolename } = JSON.parse(localStorage.getItem("userInfo") || "{}");
  console.log(rolename);

  const getListS = async () => {
    // 调用获取列表的异步函数，并传入分页码、每页大小、搜索值和类型作为参数
    const res = await getList({
      pageCode: pageCode, // 当前页码
      pageSize: pageSize, // 每页显示的数据量
      searchValue: searchValue, // 搜索关键词
      type: type, // 数据类型
    });

    // 在控制台打印服务器返回的结果
    console.log(res);

    // 将从服务器获取的数据设置到list状态中
    setList(res.data.data.data);

    // 将从服务器获取的总数据条数设置到total状态中
    setTotal(res.data.data.totalCount);
  };

  // 监听 pageSize、pageCode、searchValue、type 变化，重新获取列表数据
  useEffect(() => {
    getListS();
  }, [pageSize, pageCode, searchValue, type]);

  interface DataType {
    // 'id' 是数据项的唯一标识符，这里使用 'any' 类型表示它可以是任何类型
    id: any;
    // 'key' 是用于 React 渲染列表时的键值，通常是一个字符串
    key: string;
    // 'name' 表示数据项的名称
    name: string;
    // 'age' 表示数据项的年龄，是一个数字类型
    age: number;
    // 'address' 表示数据项的地址
    address: string;
    // 'tags' 是一个字符串数组，表示与数据项相关的标签
    tags: string[];
  }
  // 表格列
  const columns: TableProps<DataType>["columns"] = [
    {
      title: t("店铺ID"),
      dataIndex: "id",
      key: "id",
    },
    {
      title: t("店铺名称"),
      dataIndex: "shopName",
      key: "shopName",
    },
    {
      title: t("店铺类型"),
      dataIndex: "shopType",
      key: "shopType",
      width: 90,
    },
    {
      title: t("评分"),
      dataIndex: "shopScore",
      key: "shopScore",
      render: (text) => <Rate disabled value={text} />,
    },
    {
      title: t("销量"),
      dataIndex: "shopSellCount",
      key: "shopSellCount",
      width: 90,
    },
    {
      title: t("联系电话"),
      dataIndex: "shopTel",
      key: "shopTel",
    },
    {
      title: t("店铺地址"),
      dataIndex: "shopAddress",
      key: "shopAddress",
    },
    {
      title: t("店铺描述"),
      dataIndex: "shopDescription",
      key: "shopDescription",
    },
    {
      title: t("店铺图片"),
      dataIndex: "shopImage",
      key: "shopImage",
      render: (text) => <img src={text} alt="店铺图片" style={{ width: 80 }} />,
    },
    {
      title: t("操作"),
      key: "action",
      width: 250,
      render: (_, record) => {
        // 从本地存储获取用户角色
        const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
        const isAdmin = userInfo.rolename === "管理员";

        // 仅管理员显示编辑和删除按钮
        return isAdmin ? (
          <Space size="middle">
            <Button
              color="primary"
              variant="solid"
              onClick={() => Editmodal(record)}
            >
              {t("编辑")}
            </Button>

            <Button color="cyan" variant="solid" onClick={() => View(record)}>
              {t("查看")}
            </Button>
            <Popconfirm
              title="提示"
              description="你确定要删除吗?"
              onConfirm={() => confirm(record.id)}
              onCancel={cancel}
              okText="确定"
              cancelText="取消"
            >
              <Button color="danger" variant="solid">
                {t("删除")}
              </Button>
            </Popconfirm>
          </Space>
        ) : (
          <Space size="middle">
            <Button color="cyan" variant="solid" onClick={() => View(record)}>
              {t("查看")}
            </Button>
          </Space>
        ); // 非管理员不显示任何按钮
      },
    },
  ];
  // 分页
  const onChange = (pageCode: any, pageSize: any) => {
    setPageCode(pageCode);
    setPageSize(pageSize);
    console.log(pageCode, pageSize);
  };
  // 搜索
  const searchonFinish = (value: any) => {
    console.log(value);
    setSearchValue(value.searchValue);
  };
  // 重置
  const reset = () => {
    searform.resetFields();
    setSearchValue("");
    // getListS()
    setType("");
  };
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 新增数据
  const Addmodal = () => {
    setIsModalOpen(true);
    setModaltitle("新增");
    formmsg.resetFields();
  };
  // 编辑数据
  const Editmodal = (record: any) => {
    setIsModalOpen(true);
    setModaltitle("编辑");
    console.log(record);
    formmsg.setFieldsValue(record);
  };
  const View = (record: any) => {
    setIsModalOpen(true);
    setModaltitle("查看");
    formmsg.setFieldsValue(record);
  };
  // 关闭弹窗 新增或编辑成功后刷新列表
  const handleOk = async () => {
    setIsModalOpen(false);
    const data = formmsg.getFieldsValue();
    console.log(data);

    if (modaltitle === "新增") {
      await Addlist(data);
      getListS();
      message.success("新增成功");
    } else {
      await Editlist(data);
      getListS();
      message.success("编辑成功");
    }
  };
  // 关闭弹窗
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 确认删除
  const confirm = async (id: any) => {
    console.log(id);
    message.success("删除成功");
    await Dellist(id);
    getListS();
  };
  // 取消删除
  const cancel: PopconfirmProps["onCancel"] = (e) => {
    console.log(e);
    message.error("取消删除");
  };

  const exportToExcel = () => {
    // 创建一个新的工作簿
    const workbook = XLSX.utils.book_new();

    // 将表格数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(List);

    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

    // 创建一个二进制字符串作为Excel文件
    const excelBuffer = XLSX.write(workbook, {
      bookType: "xlsx", // 类型为xlsx
      type: "array", // 类型为数组
    });

    // 将二进制字符串转换为Blob对象
    const data = new Blob([excelBuffer], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
    });

    // 创建一个下载链接
    const url = window.URL.createObjectURL(data);
    const link = document.createElement("a");

    // 设置下载链接的属性
    link.href = url;
    link.setAttribute(
      "download",
      `table_data_${new Date().toISOString()}.xlsx`
    ); // 设置下载的文件名

    // 将链接添加到DOM中，然后触发点击事件以开始下载
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  };
  return (
    <div>
      {/* 新增编辑模态框 */}
      <Modal
        title={modaltitle}
        closable={{ "aria-label": "Custom Close Button" }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form
          form={formmsg}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          autoComplete="off"
          disabled={modaltitle === "查看"} // 添加禁用属性
        >
          {modaltitle == "编辑" && (
            <Form.Item label="id" name="id">
              <Input disabled />
            </Form.Item>
          )}
          <Form.Item label="商品名称" name="shopName">
            <Input />
          </Form.Item>
          <Form.Item label="商品地址" name="shopAddress">
            <Input />
          </Form.Item>
          <Form.Item label="商品描述" name="shopDescription">
            <Input />
          </Form.Item>
          <Form.Item label="商品电话" name="shopTel">
            <Input />
          </Form.Item>
          <Form.Item label="商品分数" name="shopScore">
            <Input />
          </Form.Item>
          <Form.Item label="商品销售量" name="shopSellCount">
            <Input />
          </Form.Item>
          <Form.Item label="商品类型" name="shopType">
            <Input />
          </Form.Item>
          <Form.Item label="商品图片" name="shopImage">
            <Input />
          </Form.Item>
        </Form>
      </Modal>

      {/* 搜索 */}
      <Form
        form={searform}
        name="basic"
        layout="inline"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 1500 }}
        initialValues={{ remember: true }}
        onFinish={searchonFinish}
        autoComplete="off"
      >
        {/* 新增按钮 */}

        <Button color="primary" variant="solid" onClick={Addmodal}>
          {t("新增")}
        </Button>
        <Form.Item  label={
          <span style={{ color: isLightTheme ? 'black' : 'white' }}>
            {t("内容")}
          </span>
        } name="searchValue">
          <Input />
        </Form.Item>
        <Form.Item>
          <Select
            defaultValue={t("请选择")}
            value={type}
            style={{ width: 120 }}
            onChange={(value) => setType(value)}
            options={[
              { value: "", label: t("请选择") },
              { value: "冷饮", label: t("冷饮") },
              { value: "鲜花", label: t("鲜花") },
              { value: "甜品", label: t("甜品") },
            ]}
          />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            {t("搜索")}
          </Button>
        </Form.Item>
        <Form.Item label={null}>
          {/* 重置按钮 */}
          <Button onClick={reset}>{t("重置")}</Button>
        </Form.Item>
        <Form.Item label={null}>
          <Button
            type="primary"
            icon={<FileExcelFilled />}
            onClick={exportToExcel}
          >
            {t("导出Excel")}
          </Button>
        </Form.Item>
      </Form>
      {/* 表格 */}
      <Table<DataType>
        className={isLightTheme ? 'custom-black-table1' : 'custom-black-table'} // 动态类名
        rowKey="id"
        columns={columns}
        dataSource={List}
        pagination={false}
        scroll={{
          y: 600, // 垂直滚动高度
        }}
      />
      <Pagination
        showQuickJumper
        defaultCurrent={pageCode}
        total={total}
        onChange={onChange}
        style={{ color: isLightTheme ? 'black' : 'white' }}
        // 添加中文本地化配置
        locale={{
          items_per_page: t("条/页"),
          jump_to: t("跳至"),
          page: t("页"),
          prev_page: t("上一页"),
          next_page: t("下一页"),
          show_total: (total) => `${t("共")} ${total} ${t("条记录")}`,
        }}
      />
    </div>
  );
}

export default index;
